<template>
  <div class="msg-detail" v-if="info">
    <div class="title">{{info.title}}</div>
    <div class="content" v-html="info.content"></div>
  </div>
</template>
<script>
import { getMsgDetail } from '@/api/my'
const ERR_OK = 200
export default {
  data () {
    return {
      info: null
    }
  },
  created () {
    if (this.$route.query.id) {
      this._getMsgDetail(this.$route.query.id)
    }
  },
  beforeRouteLeave (to, from, next) {
    // ...
    this.$emit('success')
    next()
  },
  methods: {
    _getMsgDetail (id) {
      getMsgDetail(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.info = res.data[0]
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.msg-detail {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  touch-action: none;
  padding: 0 0.36rem;
  box-sizing: border-box;
  background: #fff;
  .title {
    text-align: center;
    font-size: 0.32rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(0, 3, 0, 1);
    line-height: 0.88rem;
  }
  .content {
    font-size: 0.22rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(101, 101, 101, 1);
    line-height: 0.36rem;
    text-indent: 0.36rem;
  }
}
</style>
